<template>
    <div class="container">
      <h3>孙组件 {{money}} <button @click="fn">消费20</button></h3>
    </div>
  </template>
  <script>
  import { inject } from 'vue'
  export default {
    name: 'GrandSon',
    setup () {
      const money = inject('money')
      // 孙组件，消费50，通知父组件App.vue组件，进行修改
      // 不能自己修改数据，遵循单选数据流原则，大白话：数据谁定义谁修改
      const changeMoney = inject('changeMoney')
      const fn = () => {
        changeMoney(20)
      }
      return {money, fn}
    }
  }
  </script>
  <style scoped lang="less"></style>